<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 在刚开始学习前端的时候,不涉及到网络交互.这时候,相对路径相对的就是两个文件在计算机上的位置 -->
    <!-- 但是当我们的代码涉及到了网络交互.那么意味着所以引入的文件,其实都是要给服务器发送请求,从而拿到 .
      一旦涉及到网络交互,相对路径,不再相对文件位置,而是相对打开当前页面的浏览器的地址栏的url地址

      我们写的相对路径会和浏览器地址栏的url进行拼接,从而拼接成一个完整url地址.这个完整的url地址,就是最终请求文件时发出去的地址.如果拼接的正确,则可以拿到文件,如果拼接的错误,则拿不到文件
    -->

    <!-- 请求bootstrap.css 正确的地址: http://localhost:3000/bootstrap.css -->
    <!-- 错误时,拼接的地址: http://localhost:3000/message/detail/bootstrap.css -->

    <!-- ./ 覆盖浏览器地址栏中最后一个路径 -->
    <!-- 地址栏url: http://localhost:3000/ ==> http://localhost:3000/bootstrap.css -->
    <!-- <link rel="stylesheet" href="./bootstrap.css" /> -->
    <!-- 地址栏url: http://localhost:3000/message ==> http://localhost:3000/bootstrap.css -->
    <!-- <link rel="stylesheet" href="./bootstrap.css" /> -->

    <!-- 地址栏url: http://localhost:3000/message/detail/1 ==> http://localhost:3000/message/detail/bootstrap.css -->
    <!-- <link rel="stylesheet" href="./bootstrap.css" /> -->

    <!-- ../ 一个../ 覆盖浏览器地址栏中最后的两个路径 -->
    <!-- ../../ 两个../ 覆盖浏览器地址栏中最后的三个路径 -->
    <!-- ../../../ 三个../ 覆盖浏览器地址栏中最后的四个路径 -->
    <!-- 地址栏url: http://localhost:3000/message/detail/1 ==> http://localhost:3000/bootstrap.css -->
    <!-- <link rel="stylesheet" href="../../bootstrap.css" /> -->

    <!-- 如果要覆盖的路径的个数超过了浏览器地址栏路径已有的个数,则就能覆盖多少就覆盖多少-->
    <!-- 地址栏url: http://localhost:3000/message ==> http://localhost:3000/bootstrap.css -->
    <!-- <link rel="stylesheet" href="../../bootstrap.css" /> -->

    <!-- 最终实现方式: -->
    <!-- 相对路径中只写一个/ 就表示不管浏览器地址栏中有多少个路径,全部覆盖 -->
    <!-- <link rel="stylesheet" href="/bootstrap.css" /> -->

    <!-- 注意: 如果路径前面什么都不写,其实就是./的简写 -->
    <!-- <link rel="stylesheet" href="bootstrap.css" /> -->

    <!-- ===================================另一种方式===================================-->

    <link rel="stylesheet" href="./bootstrap.css" />
  </head>
  <body>
    <div id="root"></div>
    <div id="box"></div>
  </body>
</html>
